import { defineStore } from "pinia";
import { store } from "@/store";
import designSetting from "@/settings/designSetting";
import { lighten } from "@/utils/index";

const { darkTheme, appTheme, appThemeList, darkModeBgColor, lightModeBgColor } =
  designSetting;

interface DesignSettingState {
  //深色主题
  darkTheme: boolean;
  //系统风格
  appTheme: string;
  //系统内置风格
  appThemeList: string[];
}

export const useDesignSettingStore = defineStore("app-design-setting", {
  state: (): DesignSettingState => ({
    darkTheme,
    appTheme,
    appThemeList,
  }),
  actions: {
    changeMainTheme() {
      this.darkTheme = !this.darkTheme;
    },
    getThemeOverrides() {
      const appTheme = this.appTheme;
      const lightenStr = lighten(appTheme, 6);
      const bodyColor = this.darkTheme ? darkModeBgColor : lightModeBgColor;
      return {
        common: {
          primaryColor: appTheme,
          primaryColorHover: lightenStr,
          primaryColorPressed: lightenStr,
          primaryColorSuppl: appTheme,

          infoColor: appTheme,
          infoColorHover: lightenStr,
          infoColorPressed: lightenStr,
          infoColorSuppl: appTheme,

          // Success颜色相关 - 使用主题色变体
          successColor: appTheme,
          successColorHover: appTheme,
          successColorPressed: lightenStr,
          successColorSuppl: appTheme,

          // Warning颜色相关 - 使用主题色变体
          warningColor: appTheme,
          warningColorHover: lightenStr,
          warningColorPressed: lightenStr,
          warningColorSuppl: appTheme,

          // Error颜色相关 - 使用主题色变体
          errorColor: appTheme,
          errorColorHover: lightenStr,
          errorColorPressed: lightenStr,
          errorColorSuppl: appTheme,

          borderRadius: "7px",
          bodyColor,
        },
        LoadingBar: {
          colorLoading: appTheme,
        },
      };
    },
  },
});

export function useDesignSetting() {
  return useDesignSettingStore(store);
}
